<template>
	<view>
		<!-- 搜索 -->
		<view class="search-cont">
		<!-- 	<view class="search-code">
				<image
					src="../../../static/tab/扫码.svg"
					mode="widthFix"></image>
			</view> -->
			<view style="width: 50upx;"></view>
			<view class="search" @click="searchPage">
				<image
					src="cloud://liuwenjun-1g6675p9d28d14a3.6c69-liuwenjun-1g6675p9d28d14a3-1305215936/tab/搜索.svg"
					mode="widthFix"
					class="search-img"></image>
				<input
					type="text"
					placeholder="请输入文字"
					disabled />
			</view>
			<view class="search-code">
				<image
					src="cloud://liuwenjun-1g6675p9d28d14a3.6c69-liuwenjun-1g6675p9d28d14a3-1305215936/tab/消息.svg"
					mode="widthFix"></image>
			</view>
		</view>
		<!-- 轮播 -->
		<view>
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				:circular="true"
				indicator-color="rgba(255,255,255)"
				indicator-active-color="#00ff00">
				<block v-for="(item, index) in banner" :key="index">
					<swiper-item>
						<view>
							<image
								:src="item.image"
								mode="aspectFill"
								class="imageurl"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'search',
		props:{
			banner:Array
		},
		data() {
			return {
			}
		},
		methods:{
			searchPage(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
</script>

<style scoped>
	.search-code image {
		width: 50upx;
		height: 50upx;
	} /* px rem rpx */
	.search-code {
		width: 50upx;
		height: 50upx;
		padding: 0 15upx;
	}
	.search-img {
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
	}
	.search {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: flex;
		background: #fff7d4;
		border-top-left-radius: 50upx;
		border-bottom-left-radius: 50upx;
		border-bottom-right-radius: 50upx;
	}
	.search input {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 30upx;
		color: #666666;
	}
	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
		/* background: linear-gradient(to top, #ffe566 10%, #ffd300 100%); */
		background: linear-gradient(to top, #07e7ff 10%,#06b0ff  100%);
		
		padding: 30upx 0;
	}
	/* 轮播 */
	.imageurl {
		width: 100%;
		height: 300upx !important;
	} /*!important提高层级，防止图片被占用*/
	swiper {
		height: 300upx !important;
	}
</style>
